import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { register } from '../store/user.redux'
import { Input, message } from 'antd'
import AuthFooter from './AuthFooter'

class Register extends React.Component {
    constructor(props) {
        super(props)
        this.state = { PromptOpen: false, content: '' }
        this.state = {
            account: '',
            password: '',
            repassword: '',
            email: ''
        }
    }

    onChangeUserName(e) {
        this.setState({ account: e.target.value })
    }

    onChangePassword(e) {
        this.setState({ password: e.target.value })
    }

    onChangeRePassword(e) {
        this.setState({ repassword: e.target.value })
    }

    onChangeEmail(e) {
        this.setState({ email: e.target.value })
    }

    verfiyEmail(email) {
        const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        return reg.test(email)
    }

    register() {
        let account = this.state.account,
            password = this.state.password,
            repassword = this.state.repassword,
            email = this.state.email
        if (account === '') {
            message.error('账户为空')
            return
        }
        if (password === '') {
            message.error('密码为空')
            return
        }
        if (repassword === '') {
            message.error('确认密码为空')
            return
        }
        if (repassword !== password) {
            message.error('确认密码和密码不一致')
            return
        }
        if (email === '') {
            message.error('邮箱为空')
            return
        } else if (!this.verfiyEmail(email)) {
            message.error('邮箱格式错误')
            return
        }
        this.props.register({ account, password, email })
    }

    render() {
        return (
            <div className="Register">
                <div>
                    <h2>L-技术</h2>
                    <Input type="text" size="default" placeholder="账户, 数字或字母组成" value={this.state.account}
                        onChange={(e) => this.onChangeUserName(e)} />
                    <span className="line" />
                    <Input type="password" size="default" placeholder="新密码" value={this.state.password}
                        onChange={(e) => this.onChangePassword(e)} />
                    <span className="line" />
                    <Input type="password" size="default" placeholder="确认密码" value={this.state.repassword}
                        onChange={(e) => this.onChangeRePassword(e)} />
                    <span className="line" />
                    <Input type="text" size="default" placeholder="邮箱" value={this.state.email}
                        onChange={(e) => this.onChangeEmail(e)} />
                    <span className="line" />
                    <a className="Register-submit" onClick={() => {
                        this.register()
                    }}>注册</a>
                    <AuthFooter list={['index', 'login']} />
                </div>
                <style jsx>{`
                    .Register {
                        display: flex;
                        height: 100%;
                        align-items: center;
                        justify-content: center;
                        background: #ececec;
                    }
                    .Register div{
                        width: 300px;
                        height: 300px;
                        padding: 20px;
                        border: 1px solid #dddddd;
                        border-radius: 10px;
                        background: #ffffff;
                        box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
                    }
                    h2 {
                        text-align: center;
                    }
                    .line {
                        display: block;
                        width: 100%;
                        height: 10px;
                    }
                    input {
                        display: block;
                        height: 22px;
                        width: 90%;
                        padding: 5px 5%;
                        margin: 13px 0;
                        border-radius: 4px;
                        border: 0px;
                    }
                    .Register-submit{
                        background: #ffffff;
                        display: block;
                        border-radius: 4px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 15px;
                        text-align: center;
                        text-decoration: none;
                        color: white;
                        background: #1890ff;
                        letter-spacing: 2px;
                    }
                `}</style>
            </div>
        )
    }
}


const mapDispatchToProps = (dispatch) => {
    return {
        register: bindActionCreators(register, dispatch)
    }
}

export default connect(null, mapDispatchToProps)(Register)